<template>
    <div class="setInfomation">
        <IHeader class="header" back="true" title="申请入驻"></IHeader>
        <scroller class="infomation-content">
            <Step step="1"></Step>
            <div class="apply-address-wrapper flex_row border-bottom-cecece" v-if="hasAddr">
                <div class="infomation">
                    <text class="company col_464646">{{addrObj.name}}</text>
                    <div class="location-wrapper flex_row">
                        <image class="location-icon" :src="imgPath('location.png')"></image>
                        <text class="location col_868686">{{addrObj.address}}</text>
                    </div>
                </div>
                <div class="rechoose-wrapper flex_row">
                    <text class="rechoose col_868686" @click="applyCompany">重选</text>
                    <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                </div>
            </div>
            <div class="basic-infomation">
                <text class="content-tit item-height border-bottom-cecece">请提供企业基本资料</text>
                <div class="info-list">
                    <div class="info-cell flex_row item-height border-bottom-ebebeb" @click="handleSelectType">
                        <Label content="企业类型"></Label>
                        <div class="handleChoose flex_row">
                            <text class="choose-word col_868686">{{companyType}}</text>
                            <image class="arrow_right_small" :src="imgPath('arrow_right_small.png')"></image>
                        </div>
                    </div>
                    <div class="info-cell flex_row item-height border-bottom-ebebeb">
                        <Label content="企业名称"></Label>
                        <input v-model="basicForm.companyName.value" class="write enterpriseName col_868686" placeholder="请输入" type="text">
                    </div>
                    <div class="info-cell flex_row item-height border-bottom-ebebeb">
                        <Label content="企业人数"></Label>
                        <input v-model="basicForm.peopleNumber.value" class="write enterpriseNumber col_868686" placeholder="请输入" type="number">
                    </div>
                    <div class="info-cell flex_row item-height border-bottom-ebebeb">
                        <Label content="联系电话"></Label>
                        <input v-model="basicForm.telphone.value" @blur="checkTelphone" class="write enterpriseNumber col_868686" placeholder="请输入" type="tel">
                    </div>
                    <div class="info-cell flex_row item-height border-bottom-ebebeb">
                        <Label content="联系地址"></Label>
                        <input v-model="basicForm.address.value" class="write enterpriseName col_868686" placeholder="请输入" type="text">
                    </div>
                    <div class="info-cell flex_row item-height border-bottom-ebebeb">
                        <Label content="产品类型"></Label>
                        <input v-model="basicForm.productType.value" class="write enterpriseName col_868686" placeholder="请输入" type="text">
                    </div>
                    <div class="info-cell border-bottom-ebebeb introduce-wrapper">
                        <Label content="企业介绍"></Label>
                        <textarea class="enterpriseIntroduce col_868686" v-model="basicForm.companyBrief.value" placeholder="请输入" maxlength="300"></textarea>
                        <text class="word-number">{{countWord + '/300'}}</text>
                    </div>
                </div>
            </div>
            <div class="basic-infomation">
                <text class="content-tit item-height border-bottom-cecece">企业实力展示</text>
                <div class="info-list">
                    <div class="info-cell border-bottom-ebebeb no-single">
                        <div class="flex_row">
                            <Label content="企业实景照片"></Label>
                            <Question @doclick="handleRealSceneTip"></Question>
                        </div>
                        <text class="realSceneTip" v-if="realSceneTip">图片最多上传{{maxImageLength}}张，格式以png、jpg的形式上传，大小不超过3M</text>
                        <div class="image-container flex_row">
                            <div class="image-content flex_row" v-if="imageObj.doorPic.length > 0">
                                <div class="image-box" :class="[(index !== 0) ? 'margin_left_12' : '']" v-for="(item, index) in imageObj.doorPic" :key="index">
                                    <image class="scene-image" :src="item"></image>
                                    <image class="delete-image" :src="imgPath('image_delete.png')" @click="handleDeleteImage('doorPic', index)"></image>
                                </div>
                            </div>
                            <Uploader @doclick="handleUploadImage('doorPic')" v-if="imageObj.doorPic.length < maxImageLength"></Uploader>
                        </div>
                    </div>
                </div>
                <div class="info-list">
                    <div class="info-cell border-bottom-ebebeb no-single">
                        <div class="flex_row">
                            <Label content="生产车间照片"></Label>
                            <Question @doclick="handleRealProductTip"></Question>
                        </div>
                        <text class="realSceneTip" v-if="productTip">图片最多上传{{maxImageLength}}张，格式以png、jpg的形式上传，大小不超过3M</text>
                        <div class="image-container flex_row">
                            <div class="image-content flex_row" v-if="imageObj.workshopPic.length > 0">
                                <div class="image-box" :class="[(index !== 0) ? 'margin_left_12' : '']" v-for="(item, index) in imageObj.workshopPic" :key="index">
                                    <image class="scene-image" :src="item"></image>
                                    <image class="delete-image" :src="imgPath('image_delete.png')" @click="handleDeleteImage('workshopPic', index)"></image>
                                </div>
                            </div>
                            <Uploader @doclick="handleUploadImage('workshopPic')" v-if="imageObj.workshopPic.length < maxImageLength"></Uploader>
                        </div>
                    </div>
                </div>
                <div class="info-list">
                    <div class="info-cell flex_row border-bottom-ebebeb no-single">
                        <div class="flex_row">
                            <Label content="质量体系证书照片"></Label>
                            <Question @doclick="handleisoTip"></Question>
                        </div>
                        <text class="realSceneTip" v-if="isoTip">图片最多上传{{maxImageLength}}张，格式以png、jpg的形式上传，大小不超过3M</text>
                        <div class="image-container flex_row">
                            <div class="image-content flex_row" v-if="imageObj.isoPic.length > 0">
                                <div class="image-box" :class="[(index !== 0) ? 'margin_left_12' : '']" v-for="(item, index) in imageObj.isoPic" :key="index">
                                    <image class="scene-image" :src="item"></image>
                                    <image class="delete-image" :src="imgPath('image_delete.png')" @click="handleDeleteImage('isoPic', index)"></image>
                                </div>
                            </div>
                            <Uploader @doclick="handleUploadImage('isoPic')" v-if="imageObj.isoPic.length < maxImageLength"></Uploader>
                        </div>
                    </div>
                </div>
                <div class="info-list">
                    <div class="info-cell flex_row border-bottom-ebebeb no-single">
                        <Label content="打版室照片" notnecessary="true"></Label>
                        <div class="image-container flex_row">
                            <div class="image-content flex_row" v-if="imageObj.patternRoomPic.length > 0">
                                <div class="image-box" :class="[(index !== 0) ? 'margin_left_12' : '']" v-for="(item, index) in imageObj.patternRoomPic" :key="index">
                                    <image class="scene-image" :src="item"></image>
                                    <image class="delete-image" :src="imgPath('image_delete.png')" @click="handleDeleteImage('patternRoomPic', index)"></image>
                                </div>
                            </div>
                            <Uploader @doclick="handleUploadImage('patternRoomPic')" v-if="imageObj.patternRoomPic.length  < maxImageLength"></Uploader>
                        </div>
                    </div>
                </div>
                <div class="info-list">
                    <div class="info-cell flex_row border-bottom-ebebeb no-single">
                        <Label content="展厅照片" notnecessary="true"></Label>
                        <div class="image-container flex_row">
                            <div class="image-content flex_row" v-if="imageObj.displayPic.length > 0">
                                <div class="image-box" :class="[(index !== 0) ? 'margin_left_12' : '']" v-for="(item, index) in imageObj.displayPic" :key="index">
                                    <image class="scene-image" :src="item"></image>
                                    <image class="delete-image" :src="imgPath('image_delete.png')" @click="handleDeleteImage('displayPic', index)"></image>
                                </div>
                            </div>
                            <Uploader @doclick="handleUploadImage('displayPic')" v-if="imageObj.displayPic.length < maxImageLength"></Uploader>
                        </div>
                    </div>
                </div>
            </div>
            <Buttons class="nextStep" word="下一步" @doclick="handleNextStep"></Buttons>
        </scroller>
        <!--企业类型弹窗-->
        <wxc-popup popup-color="#fff" :show="typeSelectShow" ref="wxcPopup"
                   @wxcPopupOverlayClicked="closeTypeDialog" pos="right">
            <div class="dialog-content">
                <IHeader class="header" back="true" close="true" title="选择公司类型" @closeDialog="closeTypeDialog"></IHeader>
                <list class="enterprise-list">
                    <cell class="enterprise-item" @click="chooseThisEnterprise(item)" v-for="(item, index) in enterpriseList" :key="index">
                        <text class="enterprise-name item-height col_464646" :class="[(index === enterpriseList.length - 1) ? '' : 'border-bottom-cecece']">{{item.description}}</text>
                    </cell>
                </list>
            </div>
        </wxc-popup>
        <!--错误弹窗-->
        <Modal :show="showError" type="0" :word="errorWord"></Modal>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Step from '@/components/settleStep'
import Label from '@/components/label'
import Question from '@/components/question'
import Uploader from '@/components/imageUpload'
import Buttons from '@/components/buttons'
import Modal from '@/components/modal'
import { validatenull, validatePhone, isvalidatemobile } from '@/util/validate'
import { WxcPopup, WxcLoading } from 'weex-ui'
import { fileUpload } from '@/api/common'
import Nat from 'natjs'
const modal = weex.requireModule('modal')
export default {
  name: 'setInfomation',
  data () {
    return {
      loadingShow: false, // loading
      needMask: true,
      imageIndex: 0, // 上传下标
      showError: false, // 错误弹窗显示
      errorWord: '', // 错误提示 信息有误，请重新输入
      addrObj: {}, // 路由传参
      hasAddr: false, // 是否传地址
      typeSelectShow: false, // 选择公司类型弹窗显示
      enterpriseList: [], // 企业类型列表
      chooseEnterpriseType: {
        description: '请选择'
      }, // 选中企业类型
      productionType: '请选择', // 产品类型
      companyType: '请选择', // 企业类型
      basicForm: { // 资料表单
        enterType: {
          value: '',
          error: false,
          name: '入驻类型'
        }, // 入驻类型
        type: {
          value: '',
          error: false,
          name: '企业类型'
        }, // 企业类型
        companyName: {
          value: '',
          error: false,
          name: '企业名称'
        }, // 企业名称
        peopleNumber: {
          value: '',
          error: false,
          name: '企业人数'
        }, // 企业人数
        telphone: {
          value: '',
          error: false,
          name: '联系电话'
        }, // 联系电话
        address: {
          value: '',
          error: false,
          name: '联系地址'
        }, // 联系地址
        productType: {
          value: '',
          error: false,
          name: '产品类型'
        }, // 产品类型
        companyBrief: {
          value: '',
          error: false,
          name: '企业介绍'
        } // 企业介绍
      },
      realSceneTip: false, // 实景图片提示
      productTip: false, // 生产车间照片提示
      isoTip: false, // iso照片提示
      imageObj: {
        doorPic: [], // 实景图片地址
        workshopPic: [], // 生产车间照片
        patternRoomPic: [], // 打版室照片
        displayPic: [], // 展厅照片
        isoPic: [] // 质量体系证书照片
      }, // 图片地址
      realNumber: 0,
      maxImageLength: 3 // 最大上传数
    }
  },
  computed: {
    countWord () {
      return this.basicForm.companyBrief.value.length
    }
  },
  created () {
    this.addrObj = this.$route.query.addrObj // 传参的地址
    this.basicForm.enterType.value = this.$route.query.type
    this.hasAddr = !validatenull(this.addrObj)
    if (this.hasAddr) {
      this.basicForm.companyName.value = this.addrObj.name
      this.basicForm.address.value = this.addrObj.address
    }
  },
  mounted () {
    const that = this
    that.$api.get('/app/dict/company_type', {}, (res) => {
      that.enterpriseList = res.data
    })
  },
  methods: {
    applyCompany () { // 企业信息重选
      this.$router.go(-1)
    },
    handleSelectType () { // 选择企业类型
      this.typeSelectShow = true
    },
    closeTypeDialog () { // 关闭类型选择弹窗
      // this.$refs.wxcPopup.hide()
      this.typeSelectShow = false
    },
    chooseThisEnterprise (item) { // 选中类型后
      this.companyType = item.description
      this.basicForm.type.value = item.value
      this.closeTypeDialog()
    },
    checkTelphone () { // 电话号码验证
      const that = this
      if (!validatePhone(that.basicForm.telphone.value).result && !isvalidatemobile(that.basicForm.telphone.value).result) {
        that.showError = true
        that.errorWord = '联系电话信息有误'
        return
      }
      that.showError = false
    },
    handleRealSceneTip () { // 实景照片提示
      this.realSceneTip = !this.realSceneTip
    },
    handleRealProductTip () { // 生产车间照片提示
      this.productTip = !this.productTip
    },
    handleisoTip () { // iso照片提示
      this.isoTip = !this.isoTip
    },
    uploadImage (list, type) { // 上传动作
      const that = this
      if (that.imageIndex >= list.length) {
        return
      }
      that.loadingShow = true
      Nat.upload(that.$api.url + fileUpload, {
        path: list[that.imageIndex]
      }, (errs, res) => {
        if (errs) {
          modal.toast({
            message: '[ERROR] ' + JSON.stringify(errs)
          })
          return
        }
        if (res.ok) {
          let data = JSON.parse(res.data)
          let imageUrl = data.data
          for (let j in that.imageObj) {
            if (type === j) {
              that.imageObj[j].push(imageUrl)
            }
          }
          that.loadingShow = false
          that.imageIndex++
          that.uploadImage(list, type)
        }
      })
    },
    handleUploadImage (type) { // 图片上传
      const that = this
      Nat.image.pick({
        limit: 3,
        showCamera: true
      }, (err, ret) => {
        if (err) {
          modal.toast({
            message: '[ERROR] ' + JSON.stringify(err)
          })
          return
        }
        that.loadingShow = true
        let paths = ret.paths
        that.imageIndex = 0
        that.uploadImage(paths, type)
      })
    },
    handleDeleteImage (type, inx) { // 删除图片
      const that = this
      for (let j in that.imageObj) {
        if (type === j) {
          that.imageObj[j].splice(inx, 1)
        }
      }
    },
    handleNextStep () { // 下一步
      const that = this
      for (let i in that.basicForm) {
        if (that.basicForm[i].error || validatenull(that.basicForm[i].value)) {
          that.showError = true
          that.errorWord = that.basicForm[i].name + '信息有误'
          that.basicForm[i].error = true
          setTimeout(() => {
            that.showError = false
            that.basicForm[i].error = false
          }, 2000)
          return
        }
      }
      if (that.imageObj.doorPic.length < 1) {
        that.showError = true
        that.errorWord = '请上传企业实景图片'
        setTimeout(() => {
          that.showError = false
        }, 2000)
        return
      }
      if (that.imageObj.workshopPic.length < 1) {
        that.showError = true
        that.errorWord = '请上传生产车间照片'
        setTimeout(() => {
          that.showError = false
        }, 2000)
        return
      }
      if (that.imageObj.isoPic.length < 1) {
        that.showError = true
        that.errorWord = '请上传质量体系证书照片'
        setTimeout(() => {
          that.showError = false
        }, 2000)
        return
      }
      that.checkTelphone()
      if (that.showError) {
        return
      }
      let params = {
        enterType: that.basicForm.enterType.value,
        type: that.basicForm.type.value,
        companyName: that.basicForm.companyName.value,
        peopleNumber: that.basicForm.peopleNumber.value,
        telephone: that.basicForm.telphone.value,
        address: that.basicForm.address.value,
        productType: that.basicForm.productType.value,
        companyBrief: that.basicForm.companyBrief.value,
        doorPic: that.imageObj.doorPic.join(','),
        workshopPic: that.imageObj.workshopPic.join(','),
        isoPic: that.imageObj.isoPic.join(','),
        patternRoomPic: that.imageObj.patternRoomPic.join(','),
        displayPic: that.imageObj.displayPic.join(',')
      }
      that.$router.push({
        path: '/settle/authenticate',
        query: { params: params }
      })
    },
    typeTouchStart (e) { // 点击效果
      e.target.style.backgroudColor = '#2b3040'
    },
    typeTouchEnd (e) { // 点击效果
      e.target.style.backgroudColor = '#fff'
    }
  },
  components: {
    IHeader,
    Step,
    Modal,
    Label,
    Buttons,
    WxcPopup,
    WxcLoading,
    Question,
    Uploader
  }
}
</script>

<style scoped>
    .col_868686 {
        color: #868686;
    }
    .flex_row {
        flex-direction: row;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .item-height {
        height: 88px;
        line-height: 88px;
    }
    .infomation-content {
        padding-top: 88px;
        background-color: #f5f5f5;
    }
    .info-cell {
        padding-left: 24px;
        padding-right: 24px;
        justify-content: space-between;
    }
    .apply-address-wrapper {
        padding-top: 20px;
        padding-right: 24px;
        padding-bottom: 20px;
        padding-left: 24px;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }
    .company {
        width: 480px;
        margin-bottom: 8px;
        font-size: 28px;
        line-height: 40px;
    }
    .location-wrapper {
        width: 480px;
    }
    .location-icon {
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .location {
        width: 440px;
        font-size: 24px;
        line-height: 28px;
    }
    .rechoose-wrapper {
        align-items: center;
    }
    .rechoose {
        font-size: 24px;
    }
    .arrow_right {
        width: 12px;
        height: 18px;
        margin-left: 16px;
    }
    .basic-infomation {
        margin-top: 24px;
        background-color: #fff;
    }
    .content-tit {
        padding-left: 24px;
        padding-right: 24px;
        color: #a4a4a4;
        font-size: 28px;
        background-color: #fff;
    }
    .handleChoose {
        align-items: center;
    }
    .choose-word {
        font-size: 26px;
    }
    .arrow_right_small {
        width: 27px;
        height: 28px;
        margin-left: 16px;
    }
    .enterprise-item {
        padding-left: 24px;
        padding-right: 24px;
    }
    .enterprise-name {
        font-size: 26px;
    }
    .write {
        padding-right: 44px;
        text-align: right;
        border-width: 0px;
        font-size: 26px;
        placeholder-color: #cecece;
    }
    .enterpriseName {
        width: 512px;
    }
    .enterpriseNumber {
        width: 300px;
    }
    .enterpriseIntroduce {
        width: 654px;
        height: 200px;
        margin-top: 16px;
        margin-left: 24px;
        padding-top: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
        font-size: 24px;
        placeholder-color: #cecece;
    }
    .introduce-wrapper {
        padding-top: 20px;
        border-bottom-width: 0px;
    }
    .word-number {
        flex: 1;
        padding-right: 24px;
        font-size: 24px;
        line-height: 64px;
        color: #cecece;
        text-align: right;
    }
    .realSceneTip {
        flex: 1;
        height: 60px;
        margin-top: 12px;
        padding-left: 16px;
        padding-right: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #ff0f37;
        color: #ff0f37;
        font-size: 22px;
        line-height: 58px;
        border-radius: 4px;
    }
    .no-single {
        padding-top: 20px;
        padding-bottom: 24px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .image-container {
        width: 702px;
        margin-top: 20px;
    }
    .margin_left_12 {
        margin-left: 12px;
    }
    .image-content {
        margin-right: 12px;
    }
    .scene-image {
        width: 226px;
        height: 226px;
    }
    .delete-image {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 36px;
        height: 36px;
    }
    .nextStep {
        margin-top: 98px;
        margin-bottom: 144px;
    }
    .enterprise-list {
        min-height: 700px;
        margin-top: 88px;
    }
</style>
